<template>
  <!-- 头部提交表单 -->
  <el-row class="top">
    <el-button type="primary" @click="handelSave">保存</el-button>
    <el-button>返回</el-button>
  </el-row>

  <!-- 分割线 -->
  <el-divider />

  <!-- 表单数据 -->

  <el-form
    ref="orderForm"
    :inline="true"
    :rules="rules"
    label-width="120px"
    :size="formSize"
    status-icon
  >
    <el-form-item label="采购单号">
      <el-input v-model="orderCode" style="width: 360px" />
    </el-form-item>
    <el-form-item label="建单时间">
      <el-input v-model="buildDate" style="width: 360px" />
    </el-form-item>
    <el-form-item label="申请类型">
      <el-input v-model="result" style="width: 360px" />
    </el-form-item>
    <el-form-item label="申请单号">
      <el-input v-model="approve_id" style="width: 360px" />
    </el-form-item>
    <el-form-item label="采购跟单人">
      <el-input v-model="orderUser" style="width: 360px" />
    </el-form-item>
    <el-form-item label="采购金额">
      <el-input v-model="amount" style="width: 360px" />
    </el-form-item>
    <el-form-item label="供应商编号">
      <el-input v-model="user_id" style="width: 360px" />
    </el-form-item>
    <el-form-item label="供应商名称">
      <el-input v-model="user_name" style="width: 360px" />
    </el-form-item>
    <el-form-item label="申请原因">
      <el-input v-model="remark" style="width: 1100px" />
    </el-form-item>
  </el-form>
  <div class="materialInfo">
    <label>&emsp;&emsp;&emsp;物资信息</label>
    <el-table border>
      <el-table-column fixed prop="orderCode" label="采购单号" width="180" />
      <el-table-column prop="orderStatus" label="状态" width="180" />
      <el-table-column prop="buildDate" label="建单时间 " width="180" />
      <el-table-column prop="applyType" label="申请类型" width="180" />
      <el-table-column prop="supplier" label="供应商名称" width="180" />
      <el-table-column prop="applyReason" label="申请原因" width="270" />
      <el-table-column prop="operation" label="操作" width="180" />
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<script>
import { purOrderAdd } from "@/apis/Purchase/purOrder";
export default {
  data() {
    return {
      orderCode: "125",
      buildDate: "1",
      result: "1",
      approve_id: "",
      orderUser: "1",
      amount: "1",
      user_id: "1",
      user_name: "1",
      remark: "1",
    };
  },
  methods: {
    async handelSave(
      approve_id = approve_id.value,
      user_id = user_id.value,
      user_name,
      result,
      remark
    ) {
      try {
        // const result = await this.$refs.orderForm.validate();
        // console.log(result);
        // if (result) {
        const data = await purOrderAdd({
          approve_id,
          user_id,
          user_name,
          result,
          remark,
        });
        console.log(data);
        if (data.status === 200) {
          this.store.orderList.unshift(data.applyData);
        }
        // }
      } catch (error) {
        console.log("error:", error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  float: right;
  margin-top: 9px;
  .el-button {
    margin: 0 10px;
  }
}
.el-divider {
  margin-top: 50px;
}
.el-form {
  .el-form-item {
    margin-right: 15px;
    .el-button {
      color: #fff;
    }
  }
}
.materialInfo {
  position: relative;
  label {
    color: rgb(96, 98, 102);
  }
  .el-table {
    width: 1100px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 120px;
  }
}
</style>
